<template>
  <view class="content">
    <h2>请登录</h2>
    <form>
      <view class="label">邮箱<input type="text" class="input" v-model="mail" /></view>

      <view class="label">密码<input type="password" class="input" v-model="pwd" /></view>

      <button type="submit" @click="submit">{{ btnText }}</button>
    </form>
  </view>
</template>

<script>
import { joygo_b64_md5 } from '@/utils/md5';
import { strEnc, setcookie } from '@/utils/login';
var app = getApp();

export default {
  data() {
    return {
      mail: '',
      pwd: '',
      btnText: '登录'
    };
  },
  onLoad() {},
  methods: {
    getLoginAuthStr(hashpassword) {
      var myDate = new Date();
      var time = Math.floor(myDate.getTime() / 1000);
      var key1 = hashpassword;
      var key2 = hashpassword.substr(0, 2);
      var key3 = hashpassword.substr(2, 4);
      var timestr = time.toString();
      var enchex = strEnc(timestr, key1, key2, key3);
      return enchex;
    },
    submit() {
      uni.request({
        url: '/cgi-bin/login',
        method: 'POST',
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          mail: this.mail,
          authstr: this.getLoginAuthStr(joygo_b64_md5(this.pwd))
        },
        //请求后台数据成功
        success: (res) => {
          if (res.data.sessionkey) {
            setcookie('loginuserid', res.data.UserID);
            setcookie('loginusernick', res.data.UserNick);
            setcookie('sessionkey', res.data.sessionkey);
            app.globalData.userid = res.data.UserID;
            app.globalData.sessionkey = res.data.sessionkey;
            app.globalData.nickname = res.data.UserNick;

            this.btnText = '登录成功，返回首页...';
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/tiku/tiku'
              });
            }, 1000);
          }
        },
        fail: function () {}
      });
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: '#eabe79';
  background-image: url('/images/bg_room.png');
  height: 100%;
}
.content {
  width: 70%;
  max-width: 400px;
  margin: auto;
  font-size: 20px;
  padding-top: 20vh;

  h2 {
    text-align: center;
  }

  input {
    padding: 10px;
    background: #eee;
  }

  button {
    margin: 50px;
    background-color: #b37343;
    color: #000;

    &:hover {
      background-color: #c77e4a;
    }
  }
}
</style>
